import React, { Component } from 'react'
import './myFootmark.less'
import Hrader from '../../../components/head/hrader'
import axios from 'axios'
import cookies from 'js-cookie'
class MyFootmark extends Component {
    constructor() {
        super()
        this.state = {
            headtitle: { title: '我的足迹', path: '/my', age: '管理' },
            user_data: '',//用户数据
            footmarkdata: [],//浏览数据
            manageNowIndex: 0,//管理状态
        }
    }
    render() {
        let { footmarkdata, manageNowIndex } = this.state
        console.log(footmarkdata);
        return (
            <div className="myFootmark_box">
                <div className="myFootmark_header">
                    <Hrader title={this.state.headtitle} subBtn={this.manage} />
                </div>
                <div className="myFootmark_body" style={{ paddingBottom: `${manageNowIndex === 1 ? '15vw' : 0}` }}>
                    {/* 数据 */}
                    {footmarkdata.map((item, index) => {
                        return <div key={index} >
                            {/* 时间 */}
                            <div className="myFootmark_checkbox">
                                {manageNowIndex === 1 ? <input type="checkbox" id={index} checked={item.flag}
                                    onChange={(e) => {
                                        // this.all = '';
                                        this.setAll(e.target.checked, index)
                                    }}
                                /> : null}
                                <label htmlFor={index} className="myFootmark_time">{item.arr[0].timer.split('/')[0]}</label>
                            </div>
                            {/* 渲染 */}
                            <div className="myFootmark_content">
                                {item.arr.map((items) => {
                                    return <div key={items.commodity_id} className="myFootmark_contents">
                                        <p onClick={() => { this.details(items.commodity_id, items.commodity_images[0]) }}><img className='myCollect_images' src={items.commodity_images[0]} alt="" /></p>
                                        <p className="myFootmark_money">￥{items.commodity_unitPrice[0]}</p>
                                        {manageNowIndex === 1 ? <>
                                            <input type="checkbox" id={items.commodity_id} checked={items.flag}
                                                onChange={() => { this.checkboxLable(items.commodity_id, index) }}
                                                className="myFootmark_rightTop" />
                                            <label htmlFor={items.commodity_id} className="myFootmark_label"></label>
                                        </> : null}
                                    </div>
                                })}
                            </div>
                        </div>
                    })}


                </div>
                {manageNowIndex === 1 ? <div className="myCollect_allSelect">
                    <div className="myCollect_allcontent">
                        <div className="myCollect_allcontentBox">
                            <input type="checkbox" name="" id="allSelect" checked={this.all} onChange={(e) => { this.all = e.target.checked }} />
                            <label htmlFor="allSelect" className="allSelectTitle">全选</label>
                        </div>
                        <div className="delTitle" onClick={() => { this.delTitle() }}>删除</div>
                    </div>
                </div> : null}
            </div>
        )
    }
    componentDidMount() {
        this.fun()
    }
    //获取足迹
    fun = () => {
        let { state } = this.props.location
        console.log('我的足迹');
        axios({
            method: 'post',
            url: '/api/front_end/getHistory',
            data: {
                user_id: cookies.get('user_id'), //用户id
            }
        }).then(res => {
            // console.log();
            let data = res.data.data
            let arr = [];
            let arrAll = [];
            data.forEach((item, index) => {
                item.flag = false
                // new Date($('#n').value).getTime()
                let time = item.timer.split('/')[0]
                if (arr[0]) {
                    if (time === arr[0].timer.split('/')[0]) {
                        arr.push(item)
                    } else {
                        let a = {
                            arr,
                            flag: false
                        }
                        arrAll.push(a);
                        arr = [];
                        arr.push(item)
                    }
                } else {
                    arr.push(item)
                }
            });
            let a = {
                arr,
                flag: false
            }
            arrAll.push(a);
            this.setState({ footmarkdata: arrAll })
        })
    }
    //管理按钮
    manage = () => {
        let { manageNowIndex } = this.state
        if (manageNowIndex === 0) {
            this.setState({ manageNowIndex: 1, headtitle: { title: '我的足迹', path: '/my', age: '完成' }, })
        } else {
            this.setState({ manageNowIndex: 0, headtitle: { title: '我的足迹', path: '/my', age: '管理' }, })
        }

    }
    // 单选
    checkboxLable = (commodity_id, index) => {

        // console.log(commodity_id);
        let { footmarkdata } = this.state
        if (footmarkdata[index].arr.length > 0) {

            let finds = footmarkdata[index].arr.find(item => item.commodity_id === commodity_id)
            if (finds.flag) {
                finds.flag = false;
            } else {
                finds.flag = true;
            }
            this.setState({ footmarkdata })
        }
        if (footmarkdata[index].arr.length > 0) {
            let num = 0;
            footmarkdata[index].arr.forEach((item, index) => {
                if (item.flag) num += 1
            })
            // console.log(num);
            if (num === footmarkdata[index].arr.length) {
                footmarkdata[index].flag = true
            } else {
                footmarkdata[index].flag = false
            }
        }
    }
    // 全选
    get all() {
        let { footmarkdata } = this.state
        return footmarkdata.every(item => item.flag)
    }
    set all(f) {
        let { footmarkdata } = this.state
        footmarkdata.forEach((item) => {
            item.flag = f
            item.arr.forEach((items) => {
                items.flag = f
            })
        })
        this.setState({ footmarkdata })
    }
    setAll = (checked, index) => {
        let { footmarkdata } = this.state
        footmarkdata[index].arr.forEach((item) => {
            item.flag = checked
        })
        footmarkdata[index].flag = checked
        this.setState({ footmarkdata })
    }
    //详情
    details = (commodity_id, commodity_image) => {
        console.log(commodity_id, commodity_image);
        sessionStorage.setItem('shop_img', JSON.stringify(commodity_image))
        sessionStorage.setItem('shop_id', JSON.stringify(commodity_id))
        sessionStorage.setItem('shop_router', JSON.stringify(this.props.history.location.pathname))
        this.props.history.push('/itemdetail')
    }
    delTitle = () => {
        let { footmarkdata } = this.state
        if (footmarkdata.length > 0) {
            let all = [];
            footmarkdata.forEach((item) => {
                item.arr.forEach((item) => {
                    if (item.flag) {
                        all.push(item.history_id)
                    }
                })
            })
            // console.log(all);
            if (all.length > 0) {
                console.log(all);
                axios({
                    method: 'post',
                    url: '/api/front_end/clearHistory',
                    data: {
                        history_id: all
                    }
                }).then(res => {
                    console.log(res.data);
                    if (res.data.code === '01') {
                        this.fun()
                    }
                })
            }
        }
    }
}
export default MyFootmark
